<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="css/main.css">
    <style>
        /**头部样式*/
        .zh-headerbox{height: 200px;text-align: center;background: url("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3827122839,3302242264&fm=26&gp=0.jpg") #FAFAFA;color: #fff;}
        .zh-headerbox .title{font-size: 24px;}
        .zh-headerbox .zh-cheade-box{width: 640px;text-align: center;margin: 0 auto; }
    </style>

    <style>
        /**主题样式  */
        .zh-section{margin-top: 100px;}
    </style>
</head>
<body>
    <div style="text-align: center;">
        <!--头部-->
        <header>

            <div class="zh-headerbox">
                <div class="zh-cheade-box">
                    <h3 class="title pt30">2021年度技术反馈统计排行</h3>
                    <p class="pt10">如你所愿，在 layui 2.0 的版本中，我们加入了强劲的栅格系统和常见的管理系统布局方案，这意味着你可以采用 layui 排版你的响应式网站和后台管理系统的界面了。layui 的栅格采用业界比较常见的 12 等分规则，内置手机、平板、PC 桌面中大型屏幕的多终端适配处理，最低能支持到 ie8。而你应当更欣喜的是，layui 终于开放了它经典的管理系统布局方案，快速搭建一个属于你的管理系统将变得十分轻松自如</p>
                    <div class="pt10">
                        <span class="mr15">参与人数：50</span>
                        <span>统计时间：y/m/d hh:mm</span>
                    </div>
                </div>
            </div>
        </header>

        <!--主题内容-->
        <section class="zh-section">
            <div class="layui-container">
                <div class="layui-row" >
                    <div class="layui-col-md19">
                        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                        <div id="main" style="width: 600px;height:400px; margin: 0 auto;"></div>
                    </div>
                </div>
            </div>
        </section>

        <!--底部-->
        <footer>
            <div class="layui-container">
                <div class="layui-row" style="text-align: center;">
                    <div class="layui-col-md12 tc">
                        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                        <p class="b f20">统计剩余：0天12小时20分50秒</p>
                    </div>
                </div>
            </div>
        </footer>
    </div>

    <script src="js/vue.min.js"></script>
    <script src="layui/layui.js"></script>
    <script src="echarts/echarts.min.js"></script>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>